<!-- 静态数据演示版本 适合任何后端 本示例不兼容支付宝小程序（支付宝不兼容custom-action属性，请直接看/pages/index/index-static） -->
<template>
	<view class="app">
		<button @click="skuKey = true">打开SKU组件</button>

		<vk-data-goods-sku-popup
			ref="skuPopup"
			v-model="skuKey"
			border-radius="20"
			:custom-action="findGoodsInfo"
			:mode="skuMode"
			@open="openSkuPopup"
			@close="closeSkuPopup"
			@cart="addCart"
			@buy="buyNow"
		></vk-data-goods-sku-popup>
	</view>
</template>

<script>
var that; // 当前页面对象
export default {
	data() {
		return {
			// 是否打开SKU弹窗
			skuKey: false,
			// SKU弹窗模式
			skuMode: 1,
			// 后端返回的商品信息
			goodsInfo: {}
		};
	},
	// 监听 - 页面每次【加载时】执行(如：前进)
	onLoad(options) {
		that = this;
		that.init(options);
	},
	methods: {
		// 初始化
		init(options = {}) {},
		// sku组件 开始-----------------------------------------------------------
		openSkuPopup() {
			console.log("监听 - 打开sku组件");
		},
		closeSkuPopup() {
			console.log("监听 - 关闭sku组件");
		},
		// 加入购物车前的判断
		addCartFn(obj) {
			let { selectShop } = obj;
			// 模拟添加到购物车,请替换成你自己的添加到购物车逻辑
			let res = {};
			let name = selectShop.goods_name;
			if (selectShop.sku_name != "默认") {
				name += "-" + selectShop.sku_name_arr;
			}
			res.msg = `${name} 已添加到购物车`;
			if (typeof obj.success == "function") obj.success(res);
		},
		// 加入购物车按钮
		addCart(selectShop) {
			console.log("监听 - 加入购物车");
			that.addCartFn({
				selectShop: selectShop,
				success: function(res) {
					// 实际业务时,请替换自己的加入购物车逻辑
					that.toast(res.msg);
					setTimeout(function() {
						that.skuKey = false;
					}, 300);
				}
			});
		},
		// 立即购买
		buyNow(selectShop) {
			console.log("监听 - 立即购买");
			that.addCartFn({
				selectShop: selectShop,
				success: function(res) {
					// 实际业务时,请替换自己的立即购买逻辑
					that.toast("立即购买");
				}
			});
		},
		/**
		 * 获取商品信息
		 * 这里可以看到每次打开SKU都会去重新请求商品信息,为的是每次打开SKU组件可以实时看到剩余库存
		 */
		findGoodsInfo() {
			return new Promise(function(resolve, reject) {
				// 此处写接口请求，并将返回的数据进行处理成goodsInfo的数据格式，
				// 并执行resolve(goodsInfo);
				// goodsInfo是后端返回的数据（此处的数据结构和属性名sss必须与下方完全一致）
				let goodsInfo = {
					_id: "002",
					name: "迪奥香水",
					goods_thumb: "https://res.lancome.com.cn/resources/2020/9/11/15998112890781924_920X920.jpg?version=20200917220352530",
					sku_list: [
						{
							_id: "004",
							goods_id: "002",
							goods_name: "迪奥香水",
							image: "https://res.lancome.com.cn/resources/2020/9/11/15998112890781924_920X920.jpg?version=20200917220352530",
							price: 19800,
							sku_name_arr: ["50ml/瓶"],
							stock: 100
						},
						{
							_id: "005",
							goods_id: "002",
							goods_name: "迪奥香水",
							image: "https://res.lancome.com.cn/resources/2020/9/11/15998112890781924_920X920.jpg?version=20200917220352530",
							price: 9800,
							sku_name_arr: ["70ml/瓶"],
							stock: 100
						}
					],
					spec_list: [
						{
							list: [
								{
									name: "20ml/瓶"
								},
								{
									name: "50ml/瓶"
								},
								{
									name: "70ml/瓶"
								}
							],
							name: "规格"
						}
					]
				};
				resolve(goodsInfo);
			});
		},
		toast(msg) {
			uni.showToast({
				title: msg,
				icon: "none"
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.app {
	padding: 30rpx;
	font-size: 28rpx;
}
</style>
